import React, { FC, useState, useEffect } from 'react'
import { Card, Button } from 'antd'
import { useTranslation } from 'react-i18next'
import { getTags } from '@/api/article'

const Tags: FC = () => {
  const [tags, setTags] = useState([])
  const { t } = useTranslation()
  useEffect(() => {
    getTags()
      .then(({ data }) => {
        console.log(data)
        setTags(data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  return (
    <div className="mb20">
      <Card size="small" title={t('tag')}>
        {tags.map((item: any) => {
          return (
            <Button
              className="tags"
              size="small"
              style={{ margin: '4px' }}
              key={item.id}
            >
              <a href="https://github.com/ant-design/ant-design/issues/1862">
                {item.label} [{item.articleCount}]
              </a>
            </Button>
          )
        })}
      </Card>
    </div>
  )
}

export default Tags
